<template>
  <div class="header">
    <!-- 左侧：折叠按钮 -->
    <div class="left">
      <el-button type="text" @click="handleToggleCollapse">
        <el-icon>
          <Fold />
        </el-icon>
      </el-button>
      <Breadcrumb />
    </div>

    <!-- 中间占位 -->
    <div class="center"></div>

    <!-- 右侧：用户信息 -->
    <div class="right">
      <el-button type="text">
        <el-icon>
          <Refresh />
        </el-icon>
      </el-button>

      <el-badge :value="3">
        <el-button type="text">
          <el-icon>
            <Bell />
          </el-icon>
        </el-button>
      </el-badge>

      <el-dropdown>
        <div class="user">
          <el-avatar 
            :size="32" 
            :src="avatarSrc"
            @error="onAvatarError"
          >
            <el-icon>
              <User />
            </el-icon>
          </el-avatar>
          <span>{{ getRoleName(loginStore.userInfo?.role) }}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleGoProfile">个人中心</el-dropdown-item>
            <el-dropdown-item>系统设置</el-dropdown-item>
            <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

    </div>
  </div>
</template>

<script setup>
import { Fold, Refresh, Bell, User } from '@element-plus/icons-vue'
import Breadcrumb from './Breadcrumb.vue'
import { useLoginStore } from '@/stores/login/loginStore'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, watch } from 'vue'

// 定义事件
const emit = defineEmits(['toggle-collapse'])

// 处理折叠按钮点击
const handleToggleCollapse = () => {
  emit('toggle-collapse')
}

// 获取角色名称
const ROLE_MAP = { 1: '超级管理员', 2: '管理员', 3: '编辑员', 4: '审核员' }
const getRoleName = (role) => ROLE_MAP[Number(role)] || '未知角色'

// 头像兜底处理：当头像加载失败或为空时，移除 src 使用默认图标
const avatarSrc = ref('')
const computeAvatar = () => {
  const src = loginStore.userInfo?.avatar
  avatarSrc.value = typeof src === 'string' && src.trim() ? src : ''
} 

// 退出登录
const loginStore = useLoginStore()
const router = useRouter()

const onAvatarError = () => { avatarSrc.value = '' }
watch(() => loginStore.userInfo, computeAvatar, { immediate: true, deep: true })

// 跳转到个人中心页面
const handleGoProfile = () => {
  router.push('/user/profile')
}


const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('是否确定退出登录？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
  } catch {
    return
  }
  const ok = await loginStore.logout()
  if (ok) {
    try { sessionStorage.removeItem('visitedTabs') } catch {}
    ElMessage.success('已退出登录')
    router.push('/login')
  } else {
    ElMessage.error('退出失败，请稍后重试')
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 0 20px;
}

.left {
  display: flex;
  align-items: center;
  min-width: 60px;

  :deep(.el-button:first-child) {
    height: 40px;
    width: 40px;
  }

  :deep(.el-button:first-child .el-icon) {
    font-size: 20px;
  }
}

.center {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 20px;

  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
}

.right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  justify-content: flex-end;

  .user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;

    &:hover {
      background-color: #f5f7fa;
    }

    span {
      font-size: 14px;
      color: #303133;
    }
  }
}

// 确保按钮对齐
:deep(.el-button) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  padding: 0;
}


:deep(.el-avatar) {
  border: 2px solid #e4e7ed;
}

.footer-right { display:flex; justify-content:flex-end; width:100%; }
.footer-split { display:flex; justify-content:space-between; width:100%; }
</style>
